<template>
  <div>
    <div class="dialog-style" v-if="!ifDialog">
      <div class="content">
        <div class="photo">
          <div class="avatar-wrapper">
            <el-avatar :size="100" :src="employeeData.avatar" icon="el-icon-user-solid" fit="cover" style="font-size: 50px; cursor: pointer;"></el-avatar>
            <div class="avatar-edit" @click="$refs.uploadInput5.click()">更改头像</div>
              <input ref="uploadInput5" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.avatar, false, true)">
          </div>
        </div>
        <div class="main-content" v-if="!ifEdit">
          <div class="row-1">
            <div class="name">{{employeeInfo.personName}}</div>
            <div>
              <el-button type="primary" size="mini" @click="showEditDialog" v-if="isAuth('archives:person:update')">编辑</el-button>
              <el-button type="primary" size="mini" @click="showPersonalRecordDialog">查看履历</el-button>
              <el-button type="primary" size="mini" @click="showHistoryDialog" v-if="isAuth('recruitment:hrrecruitmentauditresult:list') && isAuth('recruitment:hrrecruitmentauditresult:info')">历史面试记录</el-button>
            </div>
          </div>
          <div class="info">
            <el-row>
              <el-col :span="6"><span class="item-name">性别：</span>{{employeeInfo.personSex===1 ? '男' : employeeInfo.personSex===2 ? '女' : ''}}</el-col>
              <el-col :span="6"><span class="item-name">年龄：</span>{{employeeInfo.personAge}}</el-col>
              <el-col :span="6"><span class="item-name">身高：</span>{{employeeInfo.personHeight}}</el-col>
              <el-col :span="6"><span class="item-name">婚否：</span>{{employeeInfo.personIsMarry===0 ? '未婚' : employeeInfo.personIsMarry===1 ? '已婚' : ''}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name"><span v-for="dict in dictList" :key="dict.id"><span v-if="dict.id === '1326795739818127362'">{{dict.name}}</span></span>：</span>{{employeeInfo.personEducation}}</el-col>
              <el-col :span="6"><span class="item-name">毕业院校：</span>{{employeeInfo.personGraduatedSchool}}</el-col>
              <el-col :span="12"><span class="item-name">专业：</span>{{employeeInfo.personMajor}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">入职时间：</span>{{employeeInfo.personDutytime}}</el-col>
              <el-col :span="6"><span class="item-name">参加工作时间：</span>{{employeeInfo.personJoinworkTime}}</el-col>
              <el-col :span="12"><span class="item-name">离职时间：</span>{{employeeInfo.personResign}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">部门：</span>{{departmentsName}}</el-col>
              <el-col :span="12"><span class="item-name">职位：</span>{{employeeData.position}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">岗位定级：</span>{{employeeInfo.personJobLevel}}</el-col>
              <el-col :span="6"><span class="item-name">员工工号：</span>{{employeeInfo.persongJobNumber}}</el-col>
              <el-col :span="6"><span class="item-name">办公地点：</span>{{employeeInfo.personOfficeLocation}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">个人电话：</span>{{employeeInfo.personPhone}}</el-col>
              <el-col :span="6"><span class="item-name">工作电话：</span>{{employeeInfo.personOfficeNumber}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">紧急联系人：</span>{{employeeInfo.personEmergencyContact}}</el-col>
              <el-col :span="6"><span class="item-name">与联系人的关系：</span>{{employeeInfo.personContactRelationship}}</el-col>
              <el-col :span="6"><span class="item-name">紧急联系人电话：</span>{{employeeInfo.personContactPhone}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">社保是否缴纳：</span>{{employeeInfo.personSocialSecurity==='1' ? '未缴纳' : employeeInfo.personSocialSecurity==='2' ? '已缴纳' : ''}}</el-col>
              <el-col :span="12"><span class="item-name">公积金是否缴纳：</span>{{employeeInfo.personProvidentFund==='1' ? '未缴纳' : employeeInfo.personProvidentFund==='2' ? '已缴纳' : ''}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">劳务合同签署日期：</span>{{employeeInfo.personLaborContractTime}}</el-col>
              <el-col :span="12"><span class="item-name">劳务合同截止日期：</span>{{employeeInfo.personLaborContractEndtime}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">工资卡所属银行：</span>{{salaryCardBank.info0}}</el-col>
              <el-col :span="12"><span class="item-name">银行卡号：</span>{{salaryCardBank.info1}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">开户行信息：</span>{{salaryCardBank.info2}}</el-col>
              <el-col :span="12"><span class="item-name">银行卡所在地：</span>{{salaryCardBank.info3}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><span class="item-name">员工证书：</span>{{employeeInfo.personCercificate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">创建日期：</span>{{employeeInfo.personCreateTime}}</el-col>
              <el-col :span="12"><span class="item-name">修改日期：</span>{{employeeInfo.personModifyTime}}</el-col>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[0]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.identityCard" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[1]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.resume" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[2]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.degree" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[3]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.employmentSeparationCertificate" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <el-col :span="24"><span class="item-name">备注：</span>{{employeeInfo.personRemark}}</el-col>
            </el-row>
            <el-row v-if="employeeData.status === 0">
              <el-col :span="24"><span class="item-name">离职原因：</span>{{employeeInfo.personResignReason}}</el-col>
            </el-row>
          </div>
          <section style="margin-top: 20px;" v-if="employeeInfo.personSalary" class="info">
            <el-row style="margin-bottom: 20px;">薪资待遇</el-row>
            <table class="table">
              <tr>
                <td colspan="3" align="center" style="min-width: 470px;">职称等级</td>
                <td style="min-width: 200px;"></td>
              </tr>
              <tr>
                <td rowspan="5" style="min-width: 100px;">对应月薪</td>    
                <td rowspan="2" style="min-width: 120px;">10号</td>
                <td style="min-width: 250px;">基础工资<br />（固定，和出勤挂钩）</td>
                <td style="min-width: 200px;">{{salaryInfo.salary0}}</td>
              </tr>
              <tr>
                <td>岗位工资<br />（固定，和迟到挂钩）</td>
                <td>{{salaryInfo.salary1}}</td>
              </tr>
              <tr>
                <td rowspan="2">15号（税前）</td>
                <td>星级工资<br />（基本固定，特殊清空补充考核项）</td>
                <td>{{salaryInfo.salary2}}</td>
              </tr>
              <tr>
                <td>绩效工资<br />（70%-110%浮动）</td>
                <td>{{salaryInfo.salary3}}</td>
              </tr>
              <tr>
                <td colspan="2">总月薪</td>
                <td>{{salaryInfo.salary4}}</td>
              </tr>
              <tr v-if="salaryInfo.salary5 && salaryInfo.salary5 !== '0'">
                <td>季度工资</td>
                <td>季度性25号</td>
                <td>和记考勤挂钩，中途离职不发放</td>
                <td>{{salaryInfo.salary5}}</td>
              </tr>
              <tr v-if="salaryInfo.salary6 && salaryInfo.salary5 !== '6'">
                <td>年终奖金</td>
                <td>年底发放</td>
                <td>中途离职不发放</td>
                <td>{{salaryInfo.salary6}}</td>
              </tr>
              <tr v-if="salaryInfo.salary7 && salaryInfo.salary5 !== '7'">
                <td colspan="3" align="center">预估总年薪</td>
                <td>{{salaryInfo.salary7}}</td>
              </tr>
              <tr v-if="salaryInfo.salary8 && salaryInfo.salary5 !== '8'">
                <td colspan="3" align="center">试用期</td>
                <td>{{salaryInfo.salary8}}</td>
              </tr>
            </table>
          </section>
        </div>
        <div class="main-content" v-if="ifEdit">
          <el-form ref="employeeInfo" :model="employeeInfo" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" prop="personName" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                  <el-input v-model="employeeInfo.personName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="employeeInfo.personSex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄">
                  <el-input v-model="employeeInfo.personAge" type="number" min="0" @wheel.native.prevent="stopScrollFun($event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="身高">
                  <el-input v-model="employeeInfo.personHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚否">
                  <el-radio-group v-model="employeeInfo.personIsMarry">
                    <el-radio :label="0">未婚</el-radio>
                    <el-radio :label="1">已婚</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="dict.name" v-for="dict in dictList" :key="dict.id">
                  <el-select v-model="employeeInfo.personEducation" :placeholder="'请选择'+dict.name" style="width: 100%;" v-if="dict.id === '1326795739818127362'">
                    <el-option :label="theme.name" :value="theme.name" v-for="theme in dict.children" :key="theme.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业院校">
                  <el-input v-model="employeeInfo.personGraduatedSchool"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="专业">
                  <el-input v-model="employeeInfo.personMajor"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker type="date" v-model="employeeInfo.personDutytime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="参加工作时间">
                  <el-date-picker type="date" v-model="employeeInfo.personJoinworkTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="离职时间">
                  <el-date-picker type="date" v-model="employeeInfo.personResign" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位定级">
                  <el-input v-model="employeeInfo.personJobLevel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="员工工号">
                  <el-input v-model="employeeInfo.persongJobNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="办公地点">
                  <el-input v-model="employeeInfo.personOfficeLocation"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="个人电话" prop="personPhone" 
                  :rules="[
                    { required: true, message: '请输入个人电话', trigger: 'blur' },
                    { pattern: /^[1]([3-9])[0-9]{9}$/, message: '请输入正确的个人电话', trigger: 'blur' },
                  ]">
                  <el-input v-model="employeeInfo.personPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作电话" prop="personOfficeNumber" 
                  :rules="[
                    { pattern: /^[1]([3-9])[0-9]{9}$/, message: '请输入正确的工作电话', trigger: 'blur' },
                  ]">
                  <el-input v-model="employeeInfo.personOfficeNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="紧急联系人">
                  <el-input v-model="employeeInfo.personEmergencyContact"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="与联系人关系">
                  <el-input v-model="employeeInfo.personContactRelationship"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="紧急联系人电话">
                  <el-input v-model="employeeInfo.personContactPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="社保">
                  <el-radio-group v-model="employeeInfo.personSocialSecurity">
                    <el-radio label="1">未缴纳</el-radio>
                    <el-radio label="2">已缴纳</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公积金">
                  <el-radio-group v-model="employeeInfo.personProvidentFund">
                    <el-radio label="1">未缴纳</el-radio>
                    <el-radio label="2">已缴纳</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="劳动合同">
                  <el-date-picker type="date" v-model="employeeInfo.personLaborContractTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="劳动合同截止">
                  <el-date-picker type="date" v-model="employeeInfo.personLaborContractEndtime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工资卡所属银行">
                  <el-input v-model="salaryCardBank.info0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡号">
                  <el-input v-model="salaryCardBank.info1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开户行信息">
                  <el-input v-model="salaryCardBank.info2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡所在地">
                  <el-input v-model="salaryCardBank.info3"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="拥有证书">
              <el-input v-model="employeeInfo.personCercificate"></el-input>
            </el-form-item>
            <el-form-item :label="personAttachmentName[0]" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput.click()">点击上传</el-button>
                <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.identityCard)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.identityCard" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.identityCard)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[1]" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput2.click()">点击上传</el-button>
                <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.resume)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.resume" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.resume)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[2]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput3.click()">点击上传</el-button>
                <input ref="uploadInput3" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.degree)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.degree" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.degree)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[3]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput4.click()">点击上传</el-button>
                <input ref="uploadInput4" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.employmentSeparationCertificate)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.employmentSeparationCertificate" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.employmentSeparationCertificate)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="employeeInfo.personRemark" rows="4"></el-input>
            </el-form-item>
            <div v-if="employeeData.status === 0">
              <el-form-item label="离职原因">
                <el-input type="textarea" v-model="employeeInfo.personResignReason" rows="4"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="薪资待遇" v-if="employeeInfo.personSalary">
              <el-table
                :data="salaryList"
                :show-header="false"
                :span-method="arraySpanMethod"
                border
                style="width: 100%;">
                <el-table-column prop="textName" min-width="100" align="center"></el-table-column>
                <el-table-column prop="time" min-width="120" align="center"></el-table-column>
                <el-table-column prop="remark" min-width="250" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.remark}}<br>{{scope.row.append}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="salary" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="salaryInfo['salary'+(scope.row.index - 1)]" type="number" min="0" v-if="scope.row.index !== 0"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item size="mini" v-loading="loading">
              <el-button type="primary" @click="submitEmployeeInfo">保存</el-button>
              <el-button @click="init(employeeInfo.personDingId, false, false, ifDialog)">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="ifDialog"
      class="dialog-style"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :show-close="false"
      :append-to-body="true">
      <div slot="title" class="title">
        <el-button class="back" type="text" @click="dialogVisible=false;">返回</el-button>
        <span>个人详情</span>
      </div>
      <div class="content">
        <div class="photo">
          <div class="avatar-wrapper">
            <el-avatar :size="100" :src="employeeData.avatar" icon="el-icon-user-solid" fit="cover" style="font-size: 50px; cursor: pointer;"></el-avatar>
            <div class="avatar-edit" @click="$refs.uploadInput5.click()">更改头像</div>
              <input ref="uploadInput5" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.avatar, false, true)">
          </div>
        </div>
        <div class="main-content" v-if="!ifEdit">
          <div class="row-1">
            <div class="name">{{employeeInfo.personName}}</div>
            <div>
              <el-button type="primary" size="mini" @click="showEditDialog" v-if="isAuth('archives:person:update')">编辑</el-button>
              <el-button type="primary" size="mini" @click="showPersonalRecordDialog">查看履历</el-button>
              <el-button type="primary" size="mini" @click="showHistoryDialog" v-if="isAuth('recruitment:hrrecruitmentauditresult:list') && isAuth('recruitment:hrrecruitmentauditresult:info')">历史面试记录</el-button>
            </div>
          </div>
          <div class="info">
            <el-row>
              <el-col :span="6"><span class="item-name">性别：</span>{{employeeInfo.personSex===1 ? '男' : employeeInfo.personSex===2 ? '女' : ''}}</el-col>
              <el-col :span="6"><span class="item-name">年龄：</span>{{employeeInfo.personAge}}</el-col>
              <el-col :span="6"><span class="item-name">身高：</span>{{employeeInfo.personHeight}}</el-col>
              <el-col :span="6"><span class="item-name">婚否：</span>{{employeeInfo.personIsMarry===0 ? '未婚' : employeeInfo.personIsMarry===1 ? '已婚' : ''}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name"><span v-for="dict in dictList" :key="dict.id"><span v-if="dict.id === '1326795739818127362'">{{dict.name}}</span></span>：</span>{{employeeInfo.personEducation}}</el-col>
              <el-col :span="6"><span class="item-name">毕业院校：</span>{{employeeInfo.personGraduatedSchool}}</el-col>
              <el-col :span="12"><span class="item-name">专业：</span>{{employeeInfo.personMajor}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">入职时间：</span>{{employeeInfo.personDutytime}}</el-col>
              <el-col :span="6"><span class="item-name">参加工作时间：</span>{{employeeInfo.personJoinworkTime}}</el-col>
              <el-col :span="12"><span class="item-name">离职时间：</span>{{employeeInfo.personResign}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">部门：</span>{{departmentsName}}</el-col>
              <el-col :span="12"><span class="item-name">职位：</span>{{employeeData.position}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">岗位定级：</span>{{employeeInfo.personJobLevel}}</el-col>
              <el-col :span="6"><span class="item-name">员工工号：</span>{{employeeInfo.persongJobNumber}}</el-col>
              <el-col :span="6"><span class="item-name">办公地点：</span>{{employeeInfo.personOfficeLocation}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">个人电话：</span>{{employeeInfo.personPhone}}</el-col>
              <el-col :span="6"><span class="item-name">工作电话：</span>{{employeeInfo.personOfficeNumber}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span class="item-name">紧急联系人：</span>{{employeeInfo.personEmergencyContact}}</el-col>
              <el-col :span="6"><span class="item-name">与联系人的关系：</span>{{employeeInfo.personContactRelationship}}</el-col>
              <el-col :span="6"><span class="item-name">紧急联系人电话：</span>{{employeeInfo.personContactPhone}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">社保是否缴纳：</span>{{employeeInfo.personSocialSecurity==='1' ? '未缴纳' : employeeInfo.personSocialSecurity==='2' ? '已缴纳' : ''}}</el-col>
              <el-col :span="12"><span class="item-name">公积金是否缴纳：</span>{{employeeInfo.personProvidentFund==='1' ? '未缴纳' : employeeInfo.personProvidentFund==='2' ? '已缴纳' : ''}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">劳务合同签署日期：</span>{{employeeInfo.personLaborContractTime}}</el-col>
              <el-col :span="12"><span class="item-name">劳务合同截止日期：</span>{{employeeInfo.personLaborContractEndtime}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">工资卡所属银行：</span>{{salaryCardBank.info0}}</el-col>
              <el-col :span="12"><span class="item-name">银行卡号：</span>{{salaryCardBank.info1}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">开户行信息：</span>{{salaryCardBank.info2}}</el-col>
              <el-col :span="12"><span class="item-name">银行卡所在地：</span>{{salaryCardBank.info3}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><span class="item-name">员工证书：</span>{{employeeInfo.personCercificate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><span class="item-name">创建日期：</span>{{employeeInfo.personCreateTime}}</el-col>
              <el-col :span="12"><span class="item-name">修改日期：</span>{{employeeInfo.personModifyTime}}</el-col>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[0]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.identityCard" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[1]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.resume" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[2]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.degree" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <span class="item-name">{{personAttachmentName[3]}}：</span>
              <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.employmentSeparationCertificate" :key="idx">
                <el-image style="padding: 20px 0;" fit="cover" :src="file.url" :preview-src-list="[file.url]" v-if="/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)"></el-image>
                <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)" v-if="!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.url)">
                  <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                </span>
              </div>
            </el-row>
            <el-row>
              <el-col :span="24"><span class="item-name">备注：</span>{{employeeInfo.personRemark}}</el-col>
            </el-row>
            <el-row v-if="employeeData.status === 0">
              <el-col :span="24"><span class="item-name">离职原因：</span>{{employeeInfo.personResignReason}}</el-col>
            </el-row>
          </div>
          <section style="margin-top: 20px;" v-if="employeeInfo.personSalary" class="info">
            <el-row style="margin-bottom: 20px;">薪资待遇</el-row>
            <table class="table">
              <tr>
                <td colspan="3" align="center" style="min-width: 470px;">职称等级</td>
                <td style="min-width: 200px;"></td>
              </tr>
              <tr>
                <td rowspan="5" style="min-width: 100px;">对应月薪</td>    
                <td rowspan="2" style="min-width: 120px;">10号</td>
                <td style="min-width: 250px;">基础工资<br />（固定，和出勤挂钩）</td>
                <td style="min-width: 200px;">{{salaryInfo.salary0}}</td>
              </tr>
              <tr>
                <td>岗位工资<br />（固定，和迟到挂钩）</td>
                <td>{{salaryInfo.salary1}}</td>
              </tr>
              <tr>
                <td rowspan="2">15号（税前）</td>
                <td>星级工资<br />（基本固定，特殊清空补充考核项）</td>
                <td>{{salaryInfo.salary2}}</td>
              </tr>
              <tr>
                <td>绩效工资<br />（70%-110%浮动）</td>
                <td>{{salaryInfo.salary3}}</td>
              </tr>
              <tr>
                <td colspan="2">总月薪</td>
                <td>{{salaryInfo.salary4}}</td>
              </tr>
              <tr v-if="salaryInfo.salary5 && salaryInfo.salary5 !== '0'">
                <td>季度工资</td>
                <td>季度性25号</td>
                <td>和记考勤挂钩，中途离职不发放</td>
                <td>{{salaryInfo.salary5}}</td>
              </tr>
              <tr v-if="salaryInfo.salary6 && salaryInfo.salary5 !== '6'">
                <td>年终奖金</td>
                <td>年底发放</td>
                <td>中途离职不发放</td>
                <td>{{salaryInfo.salary6}}</td>
              </tr>
              <tr v-if="salaryInfo.salary7 && salaryInfo.salary5 !== '7'">
                <td colspan="3" align="center">预估总年薪</td>
                <td>{{salaryInfo.salary7}}</td>
              </tr>
              <tr v-if="salaryInfo.salary8 && salaryInfo.salary5 !== '8'">
                <td colspan="3" align="center">试用期</td>
                <td>{{salaryInfo.salary8}}</td>
              </tr>
            </table>
          </section>
        </div>
        <div class="main-content" v-if="ifEdit">
          <el-form ref="employeeInfo" :model="employeeInfo" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" prop="personName" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                  <el-input v-model="employeeInfo.personName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="employeeInfo.personSex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄">
                  <el-input v-model="employeeInfo.personAge" type="number" min="0" @wheel.native.prevent="stopScrollFun($event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="身高">
                  <el-input v-model="employeeInfo.personHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚否">
                  <el-radio-group v-model="employeeInfo.personIsMarry">
                    <el-radio :label="0">未婚</el-radio>
                    <el-radio :label="1">已婚</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="dict.name" v-for="dict in dictList" :key="dict.id">
                  <el-select v-model="employeeInfo.personEducation" :placeholder="'请选择'+dict.name" style="width: 100%;" v-if="dict.id === '1326795739818127362'">
                    <el-option :label="theme.name" :value="theme.name" v-for="theme in dict.children" :key="theme.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业院校">
                  <el-input v-model="employeeInfo.personGraduatedSchool"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="专业">
                  <el-input v-model="employeeInfo.personMajor"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker type="date" v-model="employeeInfo.personDutytime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="参加工作时间">
                  <el-date-picker type="date" v-model="employeeInfo.personJoinworkTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="离职时间">
                  <el-date-picker type="date" v-model="employeeInfo.personResign" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位定级">
                  <el-input v-model="employeeInfo.personJobLevel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="员工工号">
                  <el-input v-model="employeeInfo.persongJobNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="办公地点">
                  <el-input v-model="employeeInfo.personOfficeLocation"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="个人电话" prop="personPhone" 
                  :rules="[
                    { required: true, message: '请输入个人电话', trigger: 'blur' },
                    { pattern: /^[1]([3-9])[0-9]{9}$/, message: '请输入正确的个人电话', trigger: 'blur' },
                  ]">
                  <el-input v-model="employeeInfo.personPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作电话" prop="personOfficeNumber" 
                  :rules="[
                    { pattern: /^[1]([3-9])[0-9]{9}$/, message: '请输入正确的工作电话', trigger: 'blur' },
                  ]">
                  <el-input v-model="employeeInfo.personOfficeNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="紧急联系人">
                  <el-input v-model="employeeInfo.personEmergencyContact"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="与联系人关系">
                  <el-input v-model="employeeInfo.personContactRelationship"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="紧急联系人电话">
                  <el-input v-model="employeeInfo.personContactPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="社保">
                  <el-radio-group v-model="employeeInfo.personSocialSecurity">
                    <el-radio label="1">未缴纳</el-radio>
                    <el-radio label="2">已缴纳</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公积金">
                  <el-radio-group v-model="employeeInfo.personProvidentFund">
                    <el-radio label="1">未缴纳</el-radio>
                    <el-radio label="2">已缴纳</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="劳动合同">
                  <el-date-picker type="date" v-model="employeeInfo.personLaborContractTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="劳动合同截止">
                  <el-date-picker type="date" v-model="employeeInfo.personLaborContractEndtime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工资卡所属银行">
                  <el-input v-model="salaryCardBank.info0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡号">
                  <el-input v-model="salaryCardBank.info1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开户行信息">
                  <el-input v-model="salaryCardBank.info2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡所在地">
                  <el-input v-model="salaryCardBank.info3"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="拥有证书">
              <el-input v-model="employeeInfo.personCercificate"></el-input>
            </el-form-item>
            <el-form-item :label="personAttachmentName[0]" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput.click()">点击上传</el-button>
                <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.identityCard)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.identityCard" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.identityCard)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[1]" :rules="[{ required: true, message: '', trigger: 'blur' }]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput2.click()">点击上传</el-button>
                <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.resume)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.resume" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.resume)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[2]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput3.click()">点击上传</el-button>
                <input ref="uploadInput3" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.degree)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.degree" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.degree)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item :label="personAttachmentName[3]">
              <el-col :span="12">
                <el-button size="small" type="primary" @click="$refs.uploadInput4.click()">点击上传</el-button>
                <input ref="uploadInput4" style="display:none;" type="file" @change="uploadFile($event, personAttachmentInfo.employmentSeparationCertificate)" multiple="multiple">
                <div class="fileitem" v-for="(file, idx) in personAttachmentInfo.employmentSeparationCertificate" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url" @click="delFile(idx, personAttachmentInfo.employmentSeparationCertificate)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="employeeInfo.personRemark" rows="4"></el-input>
            </el-form-item>
            <div v-if="employeeData.status === 0">
              <el-form-item label="离职原因">
                <el-input type="textarea" v-model="employeeInfo.personResignReason" rows="4"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="薪资待遇" v-if="employeeInfo.personSalary">
              <el-table
                :data="salaryList"
                :show-header="false"
                :span-method="arraySpanMethod"
                border
                style="width: 100%;">
                <el-table-column prop="textName" min-width="100" align="center"></el-table-column>
                <el-table-column prop="time" min-width="120" align="center"></el-table-column>
                <el-table-column prop="remark" min-width="250" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.remark}}<br>{{scope.row.append}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="salary" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="salaryInfo['salary'+(scope.row.index - 1)]" type="number" min="0" v-if="scope.row.index !== 0"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item size="mini" v-loading="loading">
              <el-button type="primary" @click="submitEmployeeInfo">保存</el-button>
              <el-button @click="init(employeeInfo.personDingId, false, false, ifDialog)">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <personalRecord ref="personalRecord"></personalRecord>
    <el-dialog
      class="history-dialog-style"
      title="历史面试记录"
      :visible.sync="historyDialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px">
      <el-table
        :data="historyList"
        @row-click="showDetailDialog"
        height="300px"
        border
        style="width: 100%">
        <el-table-column prop="intervieweeName" label="姓名" min-width="100" align="center"></el-table-column>
        <el-table-column prop="intervieweeModifyTime" label="录入时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="intervieweeJobName" label="应聘岗位" min-width="100" align="center"></el-table-column>
        <el-table-column label="面试结果" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.intervieweeResultStatus === '1' ? '录用' : scope.row.intervieweeResultStatus === '2' ? '备用' : scope.row.intervieweeResultStatus === '4' ? '拒绝' : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核结果" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.intervieweeAuditStatus === '1' ? '录用' : scope.row.intervieweeAuditStatus === '2' ? '备用' : scope.row.intervieweeAuditStatus === '4' ? '拒绝' : ''}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <employeeDetail ref="employeeDetail" :gobackText="'返回'"></employeeDetail>
  </div>
</template>

<script>
import formUtil from '@/utils/formUtil'
import dingMixin from  '@/mixins/ding'
import {dateUtil} from '@/utils/dateUtil'
import personalRecord from './personal-record'
import employeeDetail from '../recruit/employee-detail'
export default {
  data () {
    return {
      ifDialog: false,
      dialogVisible: false,
      employeeInfo: {
        personDingId: '',
        personName: '',
        personPhone: "",
        personSex: 1,
        personAge: '',
        personOfficeNumber: "",
        personHeight: "",
        personBirth: "",
        personIsMarry: 0,
        personEducation: "",
        personGraduatedSchool: "",
        personMajor: "",
        personDutytime: "",
        personJoinworkTime: "",
        personResign: "",
        personJobLevel: "",
        persongJobNumber: "",
        personOfficeLocation: "",
        personEmergencyContact: "",
        personContactRelationship: "",
        personContactPhone: "",
        personSocialSecurity: "",
        personProvidentFund: "",
        personLaborContractTime: "",
        personLaborContractEndtime: "",
        personCercificate: "",
        personRemark: "",
        personSalary: "",
        personResignReason: '',
        personAttachment: '',
        personSalaryCardBank: '',
      },
      personAttachmentName: ['身份证', '简历', '学历、学位证书', '离职证明', '头像'],
      //上传附件
      personAttachmentInfo: {
        identityCard: [],
        resume: [],
        degree: [],
        employmentSeparationCertificate: [],
        avatar: [],
      },
      //薪资
      salaryList: [
        { index: 0, textName: '职称等级', time: '' , remark: '' },
        { index: 1, textName: '对应月薪', time: '10号' , remark: '基础工资', append: '（固定，和出勤挂钩）' },
        { index: 2, textName: '', time: '' , remark: '岗位工资', append: '（固定，和迟到挂钩）' },
        { index: 3, textName: '', time: '15号（税前）' , remark: '星级工资', append: '（基本固定，特殊清空补充考核项）' },
        { index: 4, textName: '', time: '' , remark: '绩效工资', append: '（70%-110%浮动）' },
        { index: 5, textName: '', time: '总月薪' , remark: '' },
        { index: 6, textName: '季度工资', time: '季度性25号' , remark: '和记考勤挂钩，中途离职不发放' },
        { index: 7, textName: '年终奖金', time: '年底发放' , remark: '中途离职不发放' },
        { index: 8, textName: '预估总年薪', time: '' , remark: '' },
        { index: 9, textName: '试用期', time: '' , remark: '' },
      ],
      salaryFormat: ['基础工资', '岗位工资', '星级工资', '绩效工资', '月薪', '季度工资', '年终奖金', '年薪', '试用期薪水'],
      salaryInfo: {
        salary0: '',  //基础工资
        salary1: '',  //岗位工资
        salary2: '',  //星级工资
        salary3: '',  //绩效工资
        salary4: '',  //月薪
        salary5: '',  //季度工资
        salary6: '',  //年终奖金
        salary7: '',  //年薪
        salary8: ''   //试用期薪水
      },
      salaryCardBank: {
        info0: '',
        info1: '',
        info2: '',
        info3: '',
      },
      ifEdit: false,
      departmentsName: '',
      historyDialogVisible: false,
      historyList: [],
      deptList: [], //部门列表
      dictList: [],
      loading: false,
      employeeData: {},
      firstEnter: true,
    };
  },
  components: {
    personalRecord, employeeDetail
  },
  mixins: [dingMixin],
  mounted() {
    
  },
  methods: {
    async getDeptList() {
      this.deptList = await this.$httpN.postB('sys/dept/listAll');
    },
    async getDictList() {
      let {list} = await this.$httpN.postB('hr/dict/list', { pid: '', limit: 999 })
      list.forEach(item => {
        item.children = [];
        this.getSubDictList(item)
      })
      this.dictList = list.filter(item => item.id === '1326795739818127362');
    },
    async getSubDictList(item) {
      let {list} = await this.$httpN.postB('hr/dict/list', { pid: item.id, limit: 999 })
      item.children.push(...list)
    },
    //禁止滚动
    stopScrollFun(evt) {
      evt = evt || window.event;
      if(evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        evt.cancelBubble=true;
        evt.returnValue = false;
      }
      return false;
    },
    async init(dingId, init, ifToDo, ifDialog=true) {
      this.ifDialog = ifDialog;
      if(this.firstEnter) {
        await this.getDeptList()
        await this.getDictList()
        this.firstEnter = false
      }
      formUtil.resetData(this.personAttachmentInfo);
      if(init) this.employeeData = await this.$httpN.postB('hr/user/info?dingId='+dingId)
      this.departmentsName = '';
      if(this.employeeData.departmentIds && this.employeeData.departmentIds !== '') {
        let deptIds = this.employeeData.departmentIds.split(',')
        let deptNamesArr = []
        deptIds.forEach(item => {
          this.deptList.forEach( dept => {
            if(item === dept.id) deptNamesArr.push(dept.name)
          })
        })
        this.departmentsName = deptNamesArr.join(',')
      }
      this.$httpN.postB('archives/person/info', {
        personDingId: this.employeeData.dingId,
        personName: this.employeeData.realName,
        personPhone: this.employeeData.mobile,
        noticeType: ifToDo ? '0' : ''
      }).then( res => {
        this.employeeInfo = res
        let canView = !!this.employeeInfo
        if(typeof this.employeeInfo === 'boolean') {
          this.employeeInfo = {
            personDingId: this.employeeData.dingId,
            personName: this.employeeData.realName,
            personPhone: this.employeeData.mobile,
            personSex: 0,
            personAge: '',
            personOfficeNumber: "",
            personHeight: "",
            personBirth: "",
            personIsMarry: '',
            personEducation: "",
            personGraduatedSchool: "",
            personMajor: "",
            personDutytime: "",
            personJoinworkTime: "",
            personResign: "",
            personJobLevel: "",
            persongJobNumber: this.employeeData.jobNumber,
            personOfficeLocation: "",
            personEmergencyContact: "",
            personContactRelationship: "",
            personContactPhone: "",
            personSocialSecurity: "",
            personProvidentFund: "",
            personLaborContractTime: "",
            personLaborContractEndtime: "",
            personCercificate: "",
            personRemark: "",
            personSalary: "{}",
            personResignReason: '',
            personAttachment: '',
            personSalaryCardBank: '',
          }
        }
        this.salaryInfo = this.employeeInfo.personSalary && this.employeeInfo.personSalary !== ''  ? JSON.parse(this.employeeInfo.personSalary) : {}
        this.salaryCardBank = this.employeeInfo.personSalaryCardBank && this.employeeInfo.personSalaryCardBank !== ''  ? JSON.parse(this.employeeInfo.personSalaryCardBank) : {info0: '', info1: '', info2: '', info3: ''}
        let personAttachmentInfoInit = {
          identityCard: [],
          resume: [],
          degree: [],
          employmentSeparationCertificate: [],
          avatar: []
        }
        this.personAttachmentInfo = this.employeeInfo.personAttachment && (this.employeeInfo.personAttachment !== '' && this.employeeInfo.personAttachment !== '{}')  ? JSON.parse(this.employeeInfo.personAttachment) : personAttachmentInfoInit
        if(this.personAttachmentInfo && this.personAttachmentInfo.avatar && this.personAttachmentInfo.avatar.length > 0) this.employeeData.avatar = this.personAttachmentInfo.avatar[0].url
        this.ifEdit = false;
        this.dialogVisible = canView ? true : false
      })
    },
    showEditDialog() {
      this.ifEdit = true
    },
    async submitEmployeeInfo() {
      this.$refs.employeeInfo.validate(async (valid) => {
        if (valid) {
          this.employeeInfo.personSalary = JSON.stringify(this.salaryInfo)
          this.employeeInfo.personSalaryCardBank = JSON.stringify(this.salaryCardBank)
          // if(!this.personAttachmentInfo.identityCard || this.personAttachmentInfo.identityCard.length === 0) return this.$message.error('请上传'+this.personAttachmentName[0])
          // if(!this.personAttachmentInfo.resume || this.personAttachmentInfo.resume.length === 0) return this.$message.error('请上传'+this.personAttachmentName[1])
          this.employeeInfo.personAttachment = JSON.stringify(this.personAttachmentInfo)
          if(!await this.$httpN.postB(!this.employeeInfo.id ? 'archives/person/save' : 'archives/person/update', this.employeeInfo)) return
          formUtil.submitSuccess('保存成功');
          this.init(this.employeeInfo.personDingId, false, false, this.ifDialog);
          this.ifEdit = false;
        }
      });
    },
    //只存头像
    async submitEmployeeAvatar() {
      this.employeeInfo.personAttachment = JSON.stringify(this.personAttachmentInfo)
      if(this.employeeInfo.personDingId === this.userInfo.dingId) {
        if(!await this.$httpN.postB('archives/person/setAvater', {
          personDingId: this.employeeInfo.personDingId,
          personName: this.employeeInfo.personName,
          personPhone: this.employeeInfo.personPhone,
          personAttachment: this.employeeInfo.personAttachment
        })) return
      } else {
        if(!await this.$httpN.postB(!this.employeeInfo.id ? 'archives/person/save' : 'archives/person/update', this.employeeInfo)) return
      }
      formUtil.submitSuccess('保存成功');
      this.init(this.employeeInfo.personDingId, false, false, this.ifDialog);
    },
    showPersonalRecordDialog() {
      this.$nextTick(() => {
        this.$refs.personalRecord.init(this.employeeInfo.personDingId, this.employeeInfo.personName);
      })
    },
    async showHistoryDialog() {
      this.historyList = await this.$httpN.postB('recruitment/hrrecruitmentinterviewee/intervieweeList', {
        intervieweeName: this.employeeInfo.personName,
        intervieweePhone: this.employeeInfo.personPhone
      })
      this.historyDialogVisible = true;
    },
    showDetailDialog(row) {
      this.$nextTick(() => {
        this.$refs.employeeDetail.init(row.id);
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //合并列
      if(rowIndex === 0 || rowIndex === 8 || rowIndex === 9) {
        if(columnIndex === 0) {
          return [1, 3]
        } else if(columnIndex === 1 || columnIndex === 2) {
          return [0, 0]
        }
      }
      //合并列
      if(rowIndex === 5) {
        if(columnIndex === 1) {
          return [1, 2]
        } else if(columnIndex === 2) {
          return [0, 0]
        }
      }
      //合并行
      if(columnIndex === 0) {
        if(rowIndex === 1) {
          return {
            rowspan: 5,
            colspan: 1
          }
        } else if(rowIndex > 1 && rowIndex <= 5) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      //合并行
      if(columnIndex === 1) {
        if(rowIndex === 1 || rowIndex === 3) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if(rowIndex === 2 || rowIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    async uploadFile(e, target, ifMultiple=true, autoSubmit=false) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        if(autoSubmit && !(file.type === 'image/png' || file.type === 'image/jpeg')) return $this.$message.error('头像只能是 JPG 或者 PNG 格式')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        $this.loading = true
        if(!ifMultiple && target && target.length > 0) target.pop();
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;
          }else if(res.data.code === 500) {
            $this.$message.error(res.data.msg)
            target.pop();
          }
          $this.loading = false
          if(autoSubmit) $this.submitEmployeeAvatar()
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.dialog-style {
  /deep/ .el-dialog__header, /deep/ .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    min-width: 1000px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    position: relative;
    .back {
      position: absolute;
      left: 20px;
      top: 7px;
      cursor: pointer;
    }
  }
  .content {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    height: calc(100vh - 67px);
    overflow: auto;
    display: flex;
    .photo {
      min-width: 100px;
      margin-right: 30px;
      .avatar-wrapper {
        position: relative;
        cursor: pointer;
        &:hover {
          .avatar-edit {
            display: block;
          }
        }
        .avatar-edit {
          display: none;
          color: #FFF;
          font-size: 14px;
          text-align: center;
          line-height: 100px;
          position: absolute;
          left: 0;
          top: 0;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: rgba(0,0,0,.6);
        }
      }
    }
    .main-content {
      flex: 1;
      .row-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #303334;
        .name {
          cursor: pointer;
          display: inline-block;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .info {
        font-size: 12px;
        font-weight: 400;
        color: #303334;
        line-height: 16px;
        .el-row {
          margin-top: 12px;
          .item-name {
            color: #AEAEB0;
          }
        }
      }
      table.table {
        width: 100%;
        text-align: center;
        border: 1px solid #666666;
        border-collapse: collapse;
      }
      table.table td {
        border: 1px solid #666666;
        padding: 8px;
      }
      .fileitem{
        margin-top: 5px;
        background: #F5F5F5;
        width: 100%;
        padding-left: 15px;
        font-size: 12px;
        span {
          line-height: 32px;
        }
        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
        .uploadtip{
          float:right;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
.history-dialog-style /deep/ .el-dialog__body {
  padding: 0;
  .el-table td, .el-table th {
    padding: 6px 0;
  }
}
</style>